<template>
    <view v-if="show">
        <u-popup 
            :show="show" 
            mode="center" 
            :border-radius="20"
            :mask-close-able="false"
            :closeable="false"
            width="561rpx"
            height="665rpx"
            @close="handleClose"
            bgColor="transparent"
        >
            <view class="coupon-popup">
                <!-- 背景图片 -->
                <image class="popup-bg" :src="IMAGE_URL + '/static/index/coupon_pop.png'" mode="aspectFill"></image>
                
                <!-- 标题 -->
                <view class="popup-title">新人专享优惠</view>
                
                <!-- 优惠券列表 -->
                <view class="coupon-list">
                    <view 
                        class="coupon-item" 
                        v-for="(coupon, index) in couponData" 
                        :key="index"
                    >
                        <!-- 优惠券背景图片 -->
                        <image class="coupon-bg" :src="IMAGE_URL + '/static/index/coupon_btn_bg.png'" mode="aspectFill"></image>
                        
                        <view class="coupon-left">
                            <view class="amount">¥<text class="num">{{ coupon.amount }}</text></view>
                            <view class="condition">满{{ coupon.condition }}减</view>
                        </view>
                        <view class="coupon-right">
                            <view class="type">{{ coupon.type }}</view>
                            <view class="validity">有效期:{{ coupon.validity }}</view>
                        </view>
                    </view>
                </view>
                
                <!-- 查看按钮 -->
                <view class="check-btn" @click="handleCheckClick">去看看></view>
            </view>
            
            <!-- 关闭按钮 -->
            <view class="close-btn" @click="handleClose">
                <u-icon name="close" size="30rpx" color="#fff"></u-icon>
            </view>
        </u-popup>
    </view>
</template>

<script>
import appConfig from '@/config/app.js'
export default {
    name: 'CouponPop',
    props: {
        // 控制弹窗显示状态
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            // Mock数据
            couponData: [
                {
                    amount: 15,
                    condition: 99,
                    type: '平台通用券',
                    validity: '2024/05/28'
                },
                {
                    amount: 15,
                    condition: 99,
                    type: '平台通用券',
                    validity: '2024/05/28'
                }
            ]
        }
    },

    methods: {
        // 关闭弹窗
        handleClose() {
            this.$emit('close');
        },
        
        // 查看按钮点击
        handleCheckClick() {
            uni.navigateTo({
                url: '/views/mine/couponCenter'
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.coupon-popup {
    position: relative;
    width: 561rpx;
    height: 665rpx;
    padding-top: 220rpx;
    box-sizing: border-box;
}

.popup-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}


.popup-title {
    text-align: center;
    font-weight: bold;
    font-size: 36rpx;
    color: #F12E19;
    margin: 20rpx 0 10rpx;
    position: relative;
    z-index: 1;
}

.coupon-list {
    box-sizing: border-box;
}

.coupon-item {
    position: relative;
    width: 425rpx;
    height: 147rpx;
    margin: 0 auto;
    display: flex;
    background: #FFFFFF;
    border-radius: 16rpx;
    overflow: hidden;
    
    &:last-child {
        margin-bottom: 0;
    }
}

.coupon-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.coupon-left {
    width: 160rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20rpx 10rpx 20rpx 20rpx;
    position: relative;
    z-index: 1;
}

.amount {
    font-size: 28rpx;
    color: #FFFFFF;
    line-height: 1;
    margin-bottom: 8rpx;

    .num {
        font-size: 48rpx;
    }
}

.condition {
    font-size: 20rpx;
    color: #FFFFFF;
    opacity: 0.9;
}

.coupon-right {
    flex: 1;
    padding: 20rpx;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1;
}

.type {
    font-size: 24rpx;
    color: #FFFFFF;
    margin-bottom: 8rpx;
}

.validity {
    font-size: 16rpx;
    color: #FFFFFF;
}

.check-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #333;
    margin-top: -10rpx;
    z-index: 3;
}

.close-btn {
    position: absolute;
    bottom: -100rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 48rpx;
    height: 48rpx;
    border-radius: 50%;
    border: 2rpx solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    
    &:active {
        transform: translateX(-50%) scale(0.95);
    }
}
</style>